import React from "react";
import { Learn } from "./style";
import { connect } from "react-redux";

import { search} from "../../api";

class Course extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      coursesList: [],
    };
  }
  componentDidMount() {
    search({
      keywords: this.props.match.params.keywords
    }).then(res => {
      this.setState({
        coursesList: res.data.data
      });
    });
  }
  goCourse(id) {
    this.props.history.push("/course/" + id);
  }
  goTopic(id) {
    this.props.history.push("/topic/" + id);
  }
  render() {
    return (
      <div>
          <Learn>
            
            {this.state.coursesList.length>0 && this.state.coursesList.map(prentItem => {
              return (
                <div className="kc" key={prentItem.id}>
                  <div className="title">{prentItem.title}</div>
                  <ul>
                    {prentItem.units.map(item => {
                      return (
                        <li
                          key={item.id}
                          onClick={this.goCourse.bind(this, item.id)}
                        >
                          <img src={item.thumb} alt="" />
                          <div className="hidden">
                            <h2>{item.title}</h2>
                            <p>{item.describe}</p>
                          </div>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              );
            })}

            {this.state.coursesList.length === 0 && <p className="no">暂无相关课程</p>}
          </Learn>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  userInfo: state.userInfo
});

export default connect(mapStateToProps)(Course);
